import React, { useState } from 'react'
import '../assets/css/login.css'
import { Loginin } from '../request/api'
import { Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom'
export default function Login() {
    let nav = useNavigate()
    const [user, setuser] = useState({
        nickname: '',
        password: ''
    })
    function changeInfo(type, e) {
        setuser({
            ...user,
            [type]: e.target.value
        })
    }
    function loginin() {
        if (
            user.password === "" ||
            user.phone === ""
        ) {
            Toast.show({
                content: "不能为空",
            });
            return
        }
        let str = /^1[3-9]\d{9}$/;

        if (!str.test(user.phone)) {
            Toast.show({
                content: "手机号格式不对",
            });

            return;
        }
        Loginin(user)
            .then(res => {
                console.log(res);
                // 将信息存储到会话
                if (res.data.code == 200) {
                    sessionStorage.setItem('userinfo', JSON.stringify(res.data.list))
                    nav('/index/home')
                }
            })
    }
    return (<div className="wrap">
        <header>
            <h1>登录</h1>
        </header>
        <div className="login-bg">
            <div className="login-con">
                <div>
                    <img src={require('../assets/img/piclogoorange.png')} alt="" />
                </div>
                <form action="">
                    <div>
                        <input type="tel" value={user.phone} placeholder="手机号" onChange={changeInfo.bind(this, 'phone')} />
                    </div>
                    <div className="yzm">
                        <input type="text" value={user.password} placeholder="密码" onChange={changeInfo.bind(this, 'password')} />
                    </div>
                </form>
                <div className="login-btn" onClick={(e) => loginin(e)}>登 录</div>
            </div>
        </div >
    </div >)
}

